<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="../js/babel.js"></script>
</head>

<body>
  <div id="root"></div>
</body>

</html>

<script type="text/babel">

  function UserGreeting(porps) {
    return <h2>hellow, user</h2>
  }

  function GuestGreeting(props) {
    return <h2>hellow, guest</h2>
  }

  // 通过调用组件时 传入的参数进行判断要渲染哪一个组件
  function Greeting(props) {
    const isStatus = props.status
    if (isStatus) {
      return <UserGreeting />
    }
    return <GuestGreeting />
  }

  // 元素变量 通过登录状态 确定渲染哪个组件
  function Login(props) {
    return (
      <button onClick={props.onClick}>
        Login
      </button>
    )
  }

  function Logout(props) {
    return (
      <button onClick={props.onClick}>
        Logout
      </button>
    )
  }

  class LoginControl extends React.Component {
    constructor(props) {
      super(props)
      this.state = { isLoginStatus: false }
    }

    // 登录
    handleLogin() {
      this.setState({
        isLoginStatus: true
      })
      console.log(111, '登录');
    }

    // 登出
    handleLogout() {
      this.setState({
        isLoginStatus: false
      })
      console.log(222, '登出');
    }

    // render() {
    //   let button
    //   if (this.state.isLoginStatus) {
    //     button = <Logout onClick={() => this.handleLogout()} />
    //   } else {
    //     button = <Login onClick={() => this.handleLogin()} />
    //   }

    //   return (
    //     <div>
    //       <Greeting status={this.state.isLoginStatus} />
    //       {button}
    //     </div>
    //   )
    // }

    // 三目运算
    render() {
      const isLoginStatus = this.state.isLoginStatus
      return (
        <div>
          <Greeting status={isLoginStatus} />
          {}
        </div>
      )
    }
  }

  // && 运算判断
  function Mailbox(props) {
    const userMessage = props.userMessage
    return (
      <div>
        {userMessage.length > 0 &&
          <h2>未读消息 {userMessage.length}</h2>}
      </div>
    )
  }

  class Mailbox2 extends React.Component {
    constructor(props) {
      super(props)
    }
    // 返回false 的表达式会使&&后面的元素被跳过 但是会返回false表达式
    render() {
      const count = 0;
      return (
        <div>
          { count && <h1>Messages: {count}</h1>}
        </div>
      );
    } // 这里 0 就会被返回
  }


  ReactDOM.render(<Mailbox2 userMessage={['mal', 'alex']} />, document.getElementById('root'))

</script>